import React, { useState } from "react";
import { Page, InputNumber, Title, Upload } from "@/components";
import ScrollIntoView from "@/doc/components/ScrollIntoView";
const InputNumberExemple = () => {
  const [value, setValue] = useState()
  return (
    <Page
      pageHeader={{
        title: '输入框 InputNumber',
        descriptions: '基本表单组件，并在原生控件基础上进行了功能扩展，可以组合使用。',
        breadcrumb: {
          list: [
            {
              title: 'CompCards',
              path: '/compCards'
            },
            {
              title: 'InputNumberExemple',
              path: '/exemples/inputNumberExemple'
            }
          ]
        }
      }}
    >
      <ScrollIntoView>
        <Title type="tooltip" title="边框" >
          <div className="flex gap20">
            <InputNumber />
            <InputNumber defaultValue={123456} />
            <InputNumber
              borders={{
                top: false,
                bottom: false,
                left: false,
                right: false
              }}
              placeholder="点击输入数字"
            />
          </div>
        </Title>
        <Title type="tooltip" title="前缀(prefix) 后缀(suffix)" >
          <div className="flex gap20">
            <InputNumber
              prefix={'prefix'}
            />
            <InputNumber
              suffix={'suffix'}
            />
          </div>
        </Title>
        <Title type="tooltip" title="前置(addBefore) 后置(addAfter)" >
          <div className="flex gap20">
            <InputNumber
              addBefore={'addBefore'}
            />
            <InputNumber
              addAfter={'addAfter'}
            />

          </div>
        </Title>
      </ScrollIntoView>
    </Page>
  )
}

export default InputNumberExemple